<template>
  <div class="content" style="background: #fff;padding: 30px;" :bordered="false">
    <div class="table-operator">
      <a-button type="primary" icon="search" @click="addfreightLists()">添加</a-button>
    </div>
    <a-table
      :columns="signColumns"
      :data-source="signData"
      rowKey="id"
    >
    </a-table>

    <a-modal
      title="创建"
      v-model="visible"
      wrapClassName="mymodel"
      :footer="null"
      destroyOnClose
      width="62%"
    >
      <a-form @submit="handleSubmit" :form="form">
        <a-form-item
          label="模板名称"
          :labelCol="{ lg: { span: 3 }, sm: { span: 3 } }"
          :wrapperCol="{ lg: { span: 10 }, sm: { span: 10 } }"
        >
          <a-input
            allowClear
            v-decorator="['templateName', { rules: [{ required: true, message: '模板名称不能为空' }] }]"
            name="templateName"
            autocomplete="off"
          />
        </a-form-item>
        
        <div class="mybutton">
          <a-button class="cancelMymodel" @click="visible = false">取消</a-button>
          <a-button html-type="submit" type="primary">确定</a-button>
        </div>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { getList } from '@/api/mall/signin.js'
import { signColumns } from '@/const/crud/mall/sign.config'
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      visible: false,
      signColumns,
      signData:[]
    }
  },
  methods: {   
    getfreightLists() {
      getList().then(res => {
        // this.freightLists = res.data
         this.signData = res.data;
        console.log(res)
      })
    },
    
  },
  created() {
    this.getfreightLists()
  }
}
</script>
<style lang="less" scoped>
.flyray-btn{
  font-size:12px;padding:0 7px;margin:0 0 0 3px;height:24px;
}
.table-danger,
.table-danger:focus {
  color: #fff;
  background-color: #ff4d4f;
  border-color: #ff4d4f;
  margin-left: 5px;
}
.mymodel {
  .ant-modal {
    top: 0;
    padding: 0;
    .ant-modal-content {
      .ant-form-item-label {
        margin-right: 80px;
        label {
          font-weight: 700;
          color: #606366;
          width: 150px;
          &::after {
            content: '';
          }
        }
      }
      .ant-input {
        height: 36px;
      }
      .has-error .ant-form-explain {
        color: #f56c6c;
        font-size: 13px;
        line-height: 1;
        padding-top: 4px;
      }
      label.ant-radio-wrapper-checked {
        span {
          color: #1890ff;
        }
      }
    }
    .ant-modal-header {
      border-bottom: none;
      .ant-modal-title {
        font-size: 18px;
      }
    }
    .ant-modal-body {
      padding-bottom: 90px;
    }
    .ant-modal-footer {
      padding: 0 16px;
      border: none;
    }
    .add-table {
      thead {
        th {
          padding: 20px 0px;
          color: #909399;
          font-weight: 700;
          background-color: #fff;
          div {
            padding-left: 10px;
          }
        }
      }
      .ant-empty-normal {
        margin: 0;
        .ant-empty-image {
          display: none;
        }
      }
    }
    .mybutton {
      text-align: right;
      bottom: 30px;
      right: 0px;
      margin-top: 20px;
    }
    .cancelMymodel {
      margin-right: 10px;
    }
  }
}
.mymodel-two {
  z-index: 1001;
  .ant-modal {
    top: 30px;
    .ant-modal-content {
      height: 858px !important;
      .ant-form-item-label {
        margin-right: 30px;
      }
    }
  }
  .ant-checkbox-wrapper + .ant-checkbox-wrapper {
    margin-left: 0;
  }
  .ant-checkbox-wrapper {
    height: 42px;
    line-height: 42px;
    margin-right: 20px;
    user-select: none;
  }
}
.ant-modal-confirm {
  top: 35%;
}
</style>
